<script setup lang="ts">
import { onMounted, ref } from 'vue';
import http from '@/http';
import { useUserStore } from '../stores/user';
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
//定义权限菜单的数据
let qx=ref([])
onMounted(()=>{
    const user=useUserStore()
  
   let uid=user.getUser    
    http.get("/menu/getUserMenus")
    .then((res)=>{
      qx.value=res
    })
})
// 省略其他导入...
const activeIndex = ref('') // 初始为空字符串

// 处理菜单点击
const handleMenuClick = (index: string) => {
  activeIndex.value = index
}
</script>

<template>
    <!-- 获取用户拥有的权限菜单 -->
    <el-row class="tac">
 <el-col :span="24">
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
      >
      <!-- 夫菜单 -->
        <el-sub-menu v-for="(xx,index) in qx" :index="index">
          <template #title>
            <!-- :is=".imageUrl" -->
            <!-- <el-icon>
            <component :is="xx.imageUrl"/>
            </el-icon> -->
            <span>{{ xx.menuName}}</span>
          </template>
          <!-- 去下滑线 style="text-decoration: none; -->
         <RouterLink :to="childMenu.path" v-for="childMenu in xx.childMenuList" >
          <el-menu-item  :index="xx.id+'-'+childMenu.id"    @click="() => { handleMenuClick(`${xx.id}-${childMenu.id}`);  }">
          <!-- 子菜单 -->
                  <!-- <el-icon> <component :is="childMenu.imageUrl"/></el-icon> -->  
                {{ childMenu.menuName }}
            </el-menu-item>  
        </RouterLink>
          <!-- 夫菜单结束 -->
        </el-sub-menu>
      </el-menu>
    </el-col>
  </el-row>
</template>

<style scoped>
/* 自定义激活状态样式 */
:deep(.el-menu-item) {
  position: relative;
  transition: all 0.3s ease;
}

/* 激活状态 */
:deep(.el-menu-item.is-active) {
  background: linear-gradient(90deg, rgba(255, 208, 75, 0.15) 0%, transparent 100%) !important;
  border-left: 3px solid #ffd04b !important;
  color: #ffd04b !important;
  font-weight: 500;
}

/* 激活状态发光效果 */
:deep(.el-menu-item.is-active)::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: rgba(255, 208, 75, 0.3);
  box-shadow: 0 0 8px rgba(255, 208, 75, 0.5);
}

/* 悬停效果 */
:deep(.el-menu-item:hover) {
  background-color: rgba(255, 255, 255, 0.05) !important;
  padding-left: 24px !important;
}

/* 父菜单激活状态 */
:deep(.el-sub-menu.is-active .el-sub-menu__title) {
  color: #ffd04b !important;
  background-color: rgba(0, 0, 0, 0.1) !important;
}
a{
  text-decoration: none
}
</style>